<!--
    功能面板集 单页 FUNS_BLOCK
-->

<template>
<div class="fun-panel-block">
    <ul class="panel-list">
        <template v-for="item of menu">
            <li class="panel-item" @click="handleOpenMenu(item)">
                <div class="panel-item-icon-box">
                    <rx-icon-show :icon="getTabIcon(item.iconPc || item.icon)"/>
                </div>
                <p>{{getName(item.name || item.title)}}</p>
            </li>
        </template>
    </ul>
</div>
</template>

<script>
import funPanelCommon from "./funPanelCommon";
import MenuFunc from "../../../layout/js/MenuFunc";
export default {
    name: "FunPanelBlock",
    mixins:[funPanelCommon,MenuFunc],
}
</script>

<style scoped>
.fun-panel-block{
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.panel-list{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,auto));
    gap: 10px;
}

.panel-item{
    padding: 10px;
    border-radius: 6px;
    background-color: #72b2ff;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.panel-item-icon-box{
    margin-right: 6px;
}
</style>
